<template>
	<view class="editUser-page">
		<ul v-if="user">
			<!-- <picker @change="(e) => bindChange(e,'jobcateIndex','jobcate')" range-key="name" :range="jobcateList"> -->
			<li @click="jobShow = true">
				<div class="left">
					<span>职位名称</span>
				
					<input type="text" disabled v-model="jobcate.name" :placeholder="jobcate.name ? '' : '请选择职位'">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<!-- </picker> -->
			<picker @change="(e) => bindChange(e,'expIndex','exp','isExp')" range-key="name" :range="expList">
				<li>
					<div class="left">
						
						<span>经验要求</span>
						
						<input type="text" v-if="!isExp" disabled placeholder="请选择经验要求">
						<input type="text" v-else disabled v-model="handleExp">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker @change="(e) => bindChange(e,'educateIndex','educate','isEducate')" range-key="name" :range="educateList">
				<li>
					<div class="left">
						<span>学历要求</span>
						<input type="text" disabled v-if="!isEducate" placeholder="请选择学历要求">
						<input type="text" disabled v-else v-model="handleEducate">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker @change="(e) => bindChange(e,'salaryIndex','salary', 'isSalary')" range-key="name" :range="salaryList">
				<li>
					<div class="left">
						<span>薪资范围</span>
						<input type="text" disabled v-if="!isSalary" placeholder="请选择薪资范围">
						<input type="text" disabled v-else v-model="handleSalary">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<li @click="goTag">
				<div class="left">
					<span>福利待遇</span>
					<div class="tags">
						<template v-if="tagListed.length > 0">
							<span v-for="(item,index) in tagListed" :key="index">{{item.name}}</span>
						</template>
						<template v-else>
							<p style="color:#7b7b7b;">请选择福利待遇</p>
						</template>
					</div>
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>

			<li>
				<div class="left">
					<span>职位介绍</span>
					<textarea placeholder-style="color:#CCCCCC" v-model="intro" placeholder="请输入职位介绍" name="" id=""
						cols="30" rows="10"></textarea>
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<li>
				<div class="left">
					<span>职位要求</span>
					<textarea placeholder-style="color:#CCCCCC;" v-model="need" placeholder="请输入职位要求" name="" id=""
						cols="30" rows="10"></textarea>
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>


		</ul>
		<SSButton title="保存" @click="save" />

		<JobPicker :show="jobShow" @close="jobShow = false" @confirm="onChangeJob" />

		<Tabbar activePath="2" />


	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import JobPicker from '@/components/JobPicker.vue'
	import globalConfig from '@/config/index.js'

	import Tabbar from '@/components/custom-tabbar.vue'
	import {
		validPhone
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton,
			Tabbar,
			JobPicker
		},
		data() {
			return {
				user: null,


				jobcate: {
					id: '',
					name: ''
				},
				expList: [],
				expIndex: '',
				educateList: [],
				educateIndex: '',
				salaryList: [],
				salaryIndex: '',

				tagList: [],
				tagIndex: '',
				tagListed: [],

				need: '',
				intro: '',

				jobShow: false,
				
				isExp:false,
				isEducate: false,
				isSalary: false,
				isTag: false
			};
		},
		computed: {

			// 职位
			// handleJobcate() {
			// 	return this.jobcateList[this.jobcateIndex] && this.jobcateList[this.jobcateIndex].name
			// },
			handleExp() {
				return this.expList[this.expIndex] && this.expList[this.expIndex].name
			},
			handleEducate() {
				return this.educateList[this.educateIndex] && this.educateList[this.educateIndex].name
			},
			handleSalary() {
				return this.salaryList[this.salaryIndex] && this.salaryList[this.salaryIndex].name
			},
			handleTag() {
				return this.tagList[this.tagIndex] && this.tagList[this.tagIndex].name
			}
		},
		onLoad() {
			const user = uni.getStorageSync('userInfo')
			this.user = user

			// this.jobcate()
			this.exp()
			this.getEducate()
			this.salary()
			this.getTag()
			wx.hideHomeButton()
		},
		methods: {
			goTag() {
				uni.navigateTo({
					url: "/pages/index/postJobSkill?list=" + JSON.stringify(this.tagListed)
				})
			},

			async salary() {
				const {
					data
				} = await this.$http.Recruit.getSalary()
				this.salaryList = data
			},
			async jobcate() {
				const {
					data
				} = await this.$http.Recruit.jobcate()
				this.jobcateList = data
			},
			async exp() {
				const {
					data
				} = await this.$http.Recruit.getExp()
				this.expList = data
			},
			async getEducate() {
				const {
					data
				} = await this.$http.Recruit.getEducate()
				this.educateList = data
			},
			async getTag() {
				const {
					data
				} = await this.$http.Company.getTag()
				this.tagList = data
			},

			onChangeJob(e) {
				this.jobcate = e
				this.jobShow = false
			},

			bindChange(e, index, model,isModel) {
				this[index] = e.detail.value
				this.user[model] = this[model + 'List'][this[index]].id
				this[isModel] = true

				// console.log(this.user[model],model)


			},
			bindChangeTag(e) {
				let index = this.tagListed.findIndex(x => {
					return x.id == this.tagList[e.detail.value].id
				})
				if (index > 0) {
					this.tagListed.splice(index, 1)
				} else {
					this.tagListed.push(this.tagList[e.detail.value])
				}

			},
			// 提交保存
			async save() {
				// if(this.user.is_auth == 0) return uni.showModal({
				// 	title:"提示",
				// 	content:"未认证，请前去认证",
				// 	success({ confirm}) {
				// 		console.log(confirm)
				// 		if(confirm) {
				// 			uni.navigateTo({
				// 				url:"/pages/user/certification/index?type=2"
				// 			})
				// 		}
				// 	}
				// })
				
				if(!this.jobcate.id) {
					return uni.showToast({
						title:"请选择职位名称",
						icon: 'none'
					})
				}
				
				if(this.expIndex == '') {
					return uni.showToast({
						title:"请选择经验要求",
						icon: 'none'
					})
				}
				if(this.educateIndex == '') {
					return uni.showToast({
						title:"请选择学历要求",
						icon: 'none'
					})
				}
				if(this.salaryIndex == '') {
					return uni.showToast({
						title:"请选择薪资范围",
						icon: 'none'
					})
				}
				if(this.tagListed.length <= 0) {
					return uni.showToast({
						title:"请选择福利待遇",
						icon: 'none'
					})
				}
				if(this.tagListed.length <= 0) {
					return uni.showToast({
						title:"请选择福利待遇",
						icon: 'none'
					})
				}
				if(this.intro.length <= 0) {
					return uni.showToast({
						title:"请填写职位介绍",
						icon: 'none'
					})
				}
				if(this.need.length <= 0) {
					return uni.showToast({
						title:"请填写职位要求",
						icon: 'none'
					})
				}
				let data = {
					job: this.jobcate.id,
					exp: this.expList[this.expIndex].id,
					educate_level: this.educateList[this.educateIndex].id,
					salary: this.salaryList[this.salaryIndex].id ,
					tag: this.tagListed.map(x => x.id),
					intro: this.intro,
					need: this.need,
				}
				const {
					code,
					msg
				} = await this.$http.Company.postJob(data)
				return uni.showToast({
					title: code == 200 ? '发布成功，等待审核' : msg,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.editUser-page {
		padding-bottom: calc(150upx + env(safe-area-inset-bottom));

		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;

			.avatar {
				display: flex;
				align-items: center;

				.avatar-wrap {
					width: 64upx;
					height: 64upx;
					border-radius: 64upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 64upx;
					}
				}
			}

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;


				// &:last-of-type {
				// 	border-bottom: unset;
				// }

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
					}

					textarea {
						border: 1px solid #EEEEEE;
						padding: 20upx 28upx;
						box-sizing: border-box;
						width: 622upx;
					}

					input,
					textarea,
					p {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						margin-top: 20upx;
						min-height: 24upx;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;

						span {
							color: #fff;
							font-size: 24upx;
							font-weight: 400;
							background: #2AABE2;
							padding: 0 10upx;
							height: 44upx;
							line-height: 44upx;
							margin-right: 20upx;
							margin-top: 20upx;
							border-radius: 4upx;
						}
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.popup {
			position: fixed;
			top: 0%;
			left: 0%;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.popup-wrap {
				background: #fff;
				width: 570upx;
				height: 412upx;

			}

			.title {
				display: flex;
				align-items: center;
				padding: 0 32upx;
				height: 96upx;
				border-bottom: 1px solid #EEEEEE;

				span {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 400;
					line-height: 28upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.mobile-wrap {
				padding: 0 32upx;

				.mobile-input-ph {
					color: #999999;
				}

				.mobile-input {
					padding-top: 32upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;

					input {
						color: #333;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
					}

					button {
						height: 56upx;
						line-height: 56upx;
						background: #2AABE2;
						color: #fff;
						font-size: 24upx;
						font-weight: 500;
						padding: 0 10upx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding-top: 32upx;

				button {
					margin: 0;
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					background: #fff;
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
					margin-right: 32upx;
					border-radius: 8upx;

					&:last-of-type {
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}
		}
	}
</style>
